'use strict'
import React, {Component} from 'react';
import PropTypes from "prop-types";
import Color from '../../config/theme/standard/color';

import {
  View,
  Image,
  StyleSheet,
  TouchableHighlight,
  Platform,
  ScrollView,
  Dimensions
  
} from 'react-native';

export default class DialogContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      children: this.props.children,
      visible: this.props.visible,
      isWideScreen: false
    };
  };

  componentDidMount() {
    // 适配鸿蒙折叠屏动态更新组件
    this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
  }
  componentWillUnmount() {
      // 适配鸿蒙折叠屏动态更新组件
      if (this.addEventListenerScreenWidth) {
          this.addEventListenerScreenWidth = null
      }
  }
  setIsWideScreen = () => {
      const screenWidth = Dimensions.get('window').width;
      if (screenWidth) {
          this.setState({
              isWideScreen: screenWidth > 500 && screenWidth < 800
          })
      }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if ((nextProps !== prevState)) {
        return {
            children: nextProps.children,
            visible:nextProps.visible
        };
    }
    return null;
}
  _open = () => {
    this.setState({
      visible: true,
    });
  }

  _close = () => {
    this.props.callBackClose();
    this.props.onClose()
  }

  _onLayout = (event) => {
    this.setState({height: event.nativeEvent.layout.height})
  }

  render() {
    const {children, widthRatio, hasCloseButton,closeBtnPosition,spaceClose,selfWidth} = this.props;
    let childrenContainerStyle = [styles.childrenContainer];
    let closeContainerStyle = [styles.closeContainer];
    childrenContainerStyle.push({width: selfWidth? selfWidth * widthRatio: Dimensions.get('window').width * widthRatio});
    closeContainerStyle.push({width: selfWidth? selfWidth * widthRatio: Dimensions.get('window').width * widthRatio});


    let closeContent;
    if(closeBtnPosition=='bottom'){
      closeContent=(Platform.OS === 'web')?
          <View style={closeContainerStyle}>
            <TouchableHighlight activeOpacity={0.7} onClick={this._close}
                                style={styles.close}>
              <Image style={styles.image} source={require('../../assets/icon_dialog_clear.png')}/>
            </TouchableHighlight>
          </View> :
          <View style={closeContainerStyle}>
            <TouchableHighlight activeOpacity={0.7} onPress={this._close}
                                style={styles.close}>
              <Image style={styles.image} source={require('../../assets/icon_dialog_clear.png')}/>
            </TouchableHighlight>
          </View>
    }else if(closeBtnPosition=='rightInside'){
      closeContent=(Platform.OS === 'web')?
          <View style={[styles.closeRightInsideContainer, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
            <TouchableHighlight  activeOpacity={0.7} onClick={this._close} style={styles.closeRightInside}>
              <Image style={styles.image} source={require('../../assets/dialog_closeBtn.png')}/>
            </TouchableHighlight>
          </View> :
          <View style={[styles.closeRightInsideContainer, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
            <TouchableHighlight activeOpacity={0.7} onPress={this._close} style={styles.closeRightInside}>
              <Image style={styles.image} source={require('../../assets/dialog_closeBtn.png')}/>
            </TouchableHighlight>
          </View>
    };
        
      let spaceCloseView = null;
    if(spaceClose){
        spaceCloseView=(
            <TouchableHighlight
                underlayColor={"transparent"}
                activeOpacity={0}
                style={[styles.maskStyle, Platform.OS == 'harmony' &&{ zIndex:1 }]}
                onPress={this._close}
            ><View/></TouchableHighlight>
        )
    }
     
    if (!this.state.visible) {
      return null;
    } else {
      return (
          <View style={[styles.maskStyle, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
              {spaceCloseView}
            <View style={[styles.contentContainer,{marginBottom: this.props.bottomDistance}]}>
              <View style={childrenContainerStyle}>
                {this.state.children}
              </View>
              {hasCloseButton ? closeContent : null}
            </View>
          </View>
      )
    }
  };
};

const styles = StyleSheet.create({
  maskStyle: {
    position: 'absolute',
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    // zIndex: 1, // 鸿蒙遮盖问题
    alignItems: 'center',
    justifyContent: 'center',
  },
  contentContainer: {
    minHeight: 200,
    borderRadius: 5,
    backgroundColor: 'transparent',
  },
  childrenContainer: {
    borderRadius: 5,
    backgroundColor: Color.white,
    overflow: 'hidden',
  },
  closeContainer: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-end',
    height: 65,
    backgroundColor: 'transparent'
  },
  close: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Color.white,
    width: 45,
    height: 45,
    borderRadius: 22,
  },
  closeRightInsideContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 35,
    height: 35,
    position: 'absolute',
    right: 0,
    top: 0
  },
  closeRightInside:{
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: 30,
    height: 30,
  },
  image: {
    width: 16,
    height: 16
  }
});

DialogContainer.propTypes = {
  visible: PropTypes.bool,
  onClose: PropTypes.func,
  widthRatio: PropTypes.number,
  hasCloseButton: PropTypes.bool,
  closeBtnPosition:PropTypes.string,
  spaceClose:PropTypes.bool,
  callBackClose:PropTypes.func,
  bottomDistance: PropTypes.number,
  selfWidth: PropTypes.number
}
DialogContainer.defaultProps = {
  visible: false,
  onClose: () => {
  },
  widthRatio: 0.9,
  bottomDistance: 0,
  hasCloseButton: true,
  closeBtnPosition:'bottom',
  spaceClose:true,
  callBackClose:()=>{}
}
